<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>多行文本擦除效果</title>
  <style>
    body {
      background-color: #000;
      color: #fff;
    }

    .container {
      max-width: 780px;
      margin: 50px auto 0;
      font-family: Arial, Helvetica, sans-serif;
      line-height: 2;
      text-indent: 2em;
      position: relative;
    }

    .eraser {
      margin: 0;
      position: absolute;
      inset: 0;
    }

    @property --p {
      syntax: '<percentage>';
      initial-value: 0%;
      inherits: false;
    }

    .eraser .text {
      background: linear-gradient(to right, transparent var(--p), black calc(var(--p) + 30px));
      color: transparent;
      animation: erase 5s linear forwards;
    }


    @keyframes erase {
      to {
        --p: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    Lorem dolor esse do magna nulla. Et proident ea laborum fugiat nostrud duis deserunt aute duis
    do veniam. Nulla mollit irure dolor ullamco deserunt sit nisi minim reprehenderit. Commodo
    ullamco velit ea et aliquip et. Qui commodo ipsum aliquip enim commodo id labore duis mollit
    culpa. Exercitation nisi ipsum duis exercitation pariatur labore deserunt consectetur
    adipisicing. Commodo consectetur eu exercitation deserunt magna fugiat.Enim ullamco irure sunt
    laboris cillum aliquip consectetur consequat eu. Occaecat enim nulla amet quis exercitation
    ipsum. Ipsum qui do do pariatur incididunt laborum labore eu sunt proident commodo duis duis.
    Nisi ex occaecat magna nisi duis est voluptate qui pariatur tempor pariatur. Sint ex laboris
    ea cillum. Voluptate nulla nostrud ex eu aute amet. Ullamco sint laborum sint laboris commodo.
    <p class="eraser">
      <span class="text">
        Lorem dolor esse do magna nulla. Et proident ea laborum fugiat nostrud duis deserunt aute
        duis do veniam. Nulla mollit irure dolor ullamco deserunt sit nisi minim reprehenderit.
        Commodo ullamco velit ea et aliquip et. Qui commodo ipsum aliquip enim commodo id labore
        duis mollit culpa. Exercitation nisi ipsum duis exercitation pariatur labore deserunt
        consectetur adipisicing. Commodo consectetur eu exercitation deserunt magna fugiat.Enim
        ullamco irure sunt laboris cillum aliquip consectetur consequat eu. Occaecat enim nulla
        amet quis exercitation ipsum. Ipsum qui do do pariatur incididunt laborum labore eu sunt
        proident commodo duis duis. Nisi ex occaecat magna nisi duis est voluptate qui pariatur
        tempor pariatur. Sint ex laboris ea cillum. Voluptate nulla nostrud ex eu aute amet.
        Ullamco sint laborum sint laboris commodo.
      </span>
    </p>
  </div>
</body>

</html>